<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title></title>
    <link href="/asset/css/admin.css" rel="stylesheet" />
    <style id='panda-theme-color'></style>
</head>
<body  class="theme-panda">
<div>
    <div class="layui-card">
        <!-- 内容区 -->
        <div class="layui-card-body">
            <!-- 数据表格 -->
            <table class="layui-hide" id="tableList" lay-filter="tableList"></table>

            <script type="text/html" id="power-toolbar">
                <button class="layui-btn layui-btn-primary layui-btn-sm" lay-event="add">
                    <i class="layui-icon layui-icon-add-1"></i>
                    新增
                </button>
                <button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="batchRemove">
                    <i class="layui-icon layui-icon-delete"></i>
                    删除
                </button>
                <button class="layui-btn layui-btn-success layui-btn-sm" lay-event="expandAll">
                    <i class="layui-icon layui-icon-spread-left"></i>
                    展开
                </button>
                <button class="layui-btn layui-btn-success layui-btn-sm" lay-event="foldAll">
                    <i class="layui-icon layui-icon-shrink-right"></i>
                    折叠
                </button>
            </script>

            <!-- 表格操作列 -->
            <script type="text/html" id="toolBar">
                <a class="layui-btn layui-btn-primary layui-btn-xs btnEdit" lay-event="edit" title="编辑"><i class="layui-icon layui-icon-edit  "></i>编辑</a>
                <a class="layui-btn layui-btn-danger  layui-btn-xs btnDel"  lay-event="remove"  title="删除"><i class="layui-icon layui-icon-delete"></i>删除</a>
                <a class="layui-btn layui-btn-primary  layui-btn-xs btnAdd2" lay-event="add"  title="添加"><i class="layui-icon " ></i>添加</a>
			</script>
 

            <!-- 状态 -->
            <script type="text/html" id="statusTpl">
                <input type="checkbox" name="status" value="{{ d.id }}" lay-skin="switch" lay-text="正常|禁用" 
					lay-filter="status" {{ d.status == 1 ? 'checked' : '' }} >
            </script>

            <script type="text/html" id="power-type">
                {{#if (d.type == '1') { }}
                <span>模块</span>
                {{# }else if(d.type == '2'){ }}
                <span>导航</span>
                {{# }else if(d.type == '3'){ }}
                <span>菜单</span>
                {{# } }}
            </script>
            <script type="text/html" id="icon">
                <i class="layui-icon {{d.icon}}"></i>
            </script>
        </div>
    </div>
</div>
<!-- 引入脚部 -->
<script src="/asset/layui/layui.js?v=1.0.0"></script>
<script src="/asset/js/common.js?v=1.0.0"></script>
<script type="text/javascript">
    layui.use(['table','form','jquery','treetable'],function () {
    let table = layui.table;
    let form = layui.form;
    let layer = layui.layer;
    let $ = layui.jquery;
    let treetable = layui.treetable;
    let MODULE_PATH = "";

    window.render = function(){
        treetable.render({
            treeColIndex: 1,
            treeSpid: 0,
            treeIdName: 'id',
            treePidName: 'pid',
        //    skin:'line',
            treeDefaultClose: true,
            toolbar:'#power-toolbar',
            elem: '#tableList',
            url: 'list',
            method:'post',
            page: false,
            cols: [
                [
                {type: 'checkbox'},
                {field: 'name',     title: '权限名称',width: 180 },
                {field: 'url',     title: 'URL地址',width: 180 },
                {field: 'icon',     title: '图标',    width: 60,   templet:'#icon', align: 'center'},
                {field: 'type',     title: '权限类型',width: 120,  templet:'#power-type', align: 'center'},
                {field: 'status',   title: '是否显示',width: 100,  templet:'#statusTpl', align: 'center'},
                {field: 'sort',     title: '排序',width: 60, align: 'center'},
                {title: '操作',      templet: '#toolBar', width: 280, align: 'center'}
                ]
            ]
        });
    }
    render();
    table.on('tool(tableList)',function(obj){
        if (obj.event === 'remove') {
            window.remove(obj);
        } else if (obj.event === 'edit') {
            window.edit(obj);
        } else if (obj.event === 'add') {
            window.add(obj);
        }
    });

    table.on('toolbar(tableList)', function(obj){
        console.log(obj.event)
        if(obj.event === 'add'){
            window.add();
        } else if(obj.event === 'refresh'){
            window.refresh();
        } else if(obj.event === 'batchRemove'){
            window.batchRemove(obj);
        }  else if(obj.event === 'expandAll'){
             treetable.expandAll("#tableList");
        } else if(obj.event === 'foldAll'){
             treetable.foldAll("#tableList");
        }
    });

    form.on("switch(status)", (function(e) {
        var status = this.checked ? "1" : "0";
        url = MODULE_PATH + "setStatus";
        var data = {};
        data.id = this.value, data['status'] = status;
        $.ajax({
            url:url,
            dataType:"json",
            contentType: 'application/json',
            type:"POST",
            data:JSON.stringify(data),
            success:function(res){
                if(res.code == 0){
                    layer.msg(res.msg,{ icon: 1,time: 500}, function () {
                    //	layer.close(index);
                    });
                }else{
                    layer.msg(res.msg,{ icon: 5 });
                }
            }
        });
    }))

    //LAYTABLE_EXPORT
    $('#randomExport').click(function () {
        var expertData = table.cache['tableList'];
        if(typeof (expertData) == 'undefined'){
            layer.msg("请先挑选专家！");
            return;
        }
        var dataList = new Array();
        for(let index in expertData){
            dataList.push({
                '序号': Number(index)+1,
                '权限名称':expertData[index].name,
                'URL':expertData[index].url,
                '图标':expertData[index].icon
            })
        }
        var ws = XLSX.utils.json_to_sheet(dataList);
        var wb = XLSX.utils.book_new();/*新建book*/
        XLSX.utils.book_append_sheet(wb, ws, "sheet1");
        XLSX.writeFile(wb, "专家导出.xlsx");/*写文件(book,xlsx文件名称)*/

    });

    window.add = function(obj){
        if(obj != null){
            url = "edit?id=0&pid="+obj.data.id;
        }else{
            url = "edit?id=0&pid=0";
        }
        layer.open({
            type: 2,
            title: '新增系统菜单',
            shade: 0.1,
            area: ['900px', '650px'],
            content: url
        });
    }

    window.edit = function(obj){
        layer.open({
            type: 2,
            title: '修改系统菜单',
            shade: 0.1,
            area: ['900px', '650px'],
            content: MODULE_PATH + 'edit?id='+obj.data.id+"&pid=0"
        });
    }
    window.remove = function(obj){
        layer.confirm('确定要删除该权限', {icon: 3, title:'提示'}, function(index){
            layer.close(index);
            let loading = layer.load();
            $.ajax({
                url: MODULE_PATH+"remove/"+obj.data['id'],
                dataType:'json',
                type:'delete',
                success:function(result){
                    layer.close(loading);
                    if(result.success){
                        layer.msg(result.msg,{icon:1,time:1000},function(){
                            obj.del();
                        });
                    }else{
                        layer.msg(result.msg,{icon:2,time:1000});
                    }
                }
            })
        });
    }

    window.batchRemove = function(obj) {
        let data = table.checkStatus(obj.config.id).data;
        if (data.length === 0) {
            layer.msg("未选中数据", {
                icon: 3,
                time: 1000
            });
            return false;
        }
        let ids = "";
        for (let i = 0; i < data.length; i++) {
            ids += data[i].powerId + ",";
        }
        ids = ids.substr(0, ids.length - 1);
        layer.confirm('确定要删除这些权限', {
            icon: 3,
            title: '提示'
        }, function(index) {
            layer.close(index);
            let loading = layer.load();
            $.ajax({
                url: MODULE_PATH + "batchRemove/" + ids,
                dataType: 'json',
                type: 'delete',
                success: function(result) {
                    layer.close(loading);
                    if (result.success) {
                        layer.msg(result.msg, {
                            icon: 1,
                            time: 1000
                        }, function() {
                            table.reload('tableList');
                        });
                    } else {
                        layer.msg(result.msg, {
                            icon: 2,
                            time: 1000
                        });
                    }
                }
            })
        });
    }
})
</script>
</body>
</html>